import React, {useEffect, useState} from 'react';
import {
  ScrollView,
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  FlatList,
  Image,
  TextInput,
  PermissionsAndroid,
  Platform,
} from 'react-native';
import {Toast} from '@ant-design/react-native';
import {WebView} from 'react-native-webview';
import BaseUrl from '../../config/BaseUrl';
import {getNewsDetail} from '../../service/home';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
// import CommentInput from '../../components/CommentInput';
import LikeInput from '../../components/LikeInput';
import px2dp from '../../utils/px2dp';
import ShareUtile from '../../utils/ShareUtil';
import styles from './style';
import {sendNewsComment} from '../../service/my';
import {commentList} from '../../service/user';

const NewsDetail = (props) => {
  const {
    route: {
      params: {artId},
    },
  } = props;

  const navigation = useNavigation();
  const [shareVisible, setShareVisible] = useState(false);
  const [newsDetail, setNewsDetail] = useState(false);
  const [comment, setComment] = useState([]);

  useEffect(() => {
    navigation.setOptions({
      title: '知识库',
      // headerRight: () => (
      //   <TouchableOpacity
      //     onPress={() => setShareVisible(true)}
      //     style={{marginRight: px2dp(24)}}>
      //     <Text>分享</Text>
      //   </TouchableOpacity>
      // ),
    });
  }, [navigation]);

  useEffect(() => {
    getNewsDetail(artId).then((res) => {
      console.log(res);
      setNewsDetail(res.data);
    });
    init();
  }, []);

  const init = () => {
    // 评论
    commentList(artId).then((res) => {
      console.log(res, 'commentList');
      setComment(res.rows);
    });
  };

  const sendCommentFn = (val) => {
    if (!val?.trim()) {
      Toast.info('请输入内容');
      return;
    }
    sendNewsComment({
      artId,
      comtDesc: val,
      srcNam: newsDetail?.artTitle,
    }).then((res) => {
      if (res.code === 200) {
        init();
      }
    });
  };
  const share = async (val) => {
    console.log(ShareUtile.share);
    try {
      if (Platform.OS === 'ios') {
        ShareUtile.share(
          'sssss',
          'http://dev.umeng.com/images/tab2_1.png',
          'http://www.umeng.com/',
          'title',
          val,
          (code, message) => {
            setShareVisible(false);
          },
        );
        return;
      }
      const permissions = [
        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
      ];

      const granted = await PermissionsAndroid.requestMultiple(permissions);
      console.log(granted);
      // if (granted['android.permission.WRITE_EXTERNAL_STORAGE'] === 'granted') {} else {}
      ShareUtile.share(
        'sssss',
        'http://dev.umeng.com/images/tab2_1.png',
        'http://www.umeng.com/',
        'title',
        val,
        (code, message) => {
          setShareVisible(false);
        },
      );
      return granted;
    } catch (err) {
      // this._show(err.toString());

      return null;
    }

    // ShareUtile.share(
    //   '测试',
    //   'https://moo.dingtax.cn/goods/image/202009/912bd2e7899a77e1bd21baa9a45e881a69finy.png',
    //   'https://moo-test.dingtax.cn/app#/',
    //   'title',
    //   val,
    //   (code, message) => {
    //     console.log({result: message});
    //   },
    // );
  };
  return (
    <AreaView>
      <ScrollView style={styles.container}>
        <View style={styles.head}>
          <Text style={styles.head_left}>来源：{newsDetail?.fromSite}</Text>
          <Text style={styles.head_right}>{newsDetail?.createTime}</Text>
        </View>
        <WebView
          useWebKit={true}
          style={styles.webview_container}
          originWhitelist={['*']}
          // source={{html: newsDetail?.content}}
          // source={{ html: '<h1 style="font-size: 100px">Hello world</h1>' }}
          source={{
            html:
              '<html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"></head><body><p>' +
              newsDetail?.content +
              '</p></body></html>',
          }}
        />
        {/* <Text>{newsDetail?.content}</Text> */}
        <View style={styles.title_container}>
          <View style={styles.line} />
          <Text style={styles.disc_title}>
            资讯评论 （共{comment?.length}条）
          </Text>
        </View>
        {(comment || []).map((item) => (
          <View key={item.comtId} style={styles.disc_list}>
            <Image
              style={styles.disc_cover}
              source={{uri: BaseUrl.imgurl + item.custImage}}
            />
            <View style={styles.disc_info}>
              <Text style={styles.ques}>
                {item.nickName} {item.createTime}
              </Text>
              <Text style={styles.answer}>
                {/* <Text style={styles.name}>老师回答：</Text> */}
                {item.comtDesc}
              </Text>
            </View>
          </View>
        ))}
        <View style={styles.gap} />
      </ScrollView>
      {/* <CommentInput
        onShare={() => {
          setShareVisible(true);
        }}
      /> */}
      {shareVisible && (
        <View style={styles.share_container}>
          <View style={styles.share_type}>
            <TouchableOpacity
              style={styles.share_list}
              activeOpacity={1}
              onPress={() => share(2)}>
              <Image
                source={require('../../assets/images/share/wechat.png')}
                style={styles.share_icon}
              />
              <Text style={styles.share_text}>微信</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.share_list}
              activeOpacity={1}
              onPress={() => share(3)}>
              <Image
                source={require('../../assets/images/share/wxf.png')}
                style={styles.share_icon}
              />
              <Text style={styles.share_text}>朋友圈</Text>
            </TouchableOpacity>
            {/* <TouchableOpacity  activeOpacity={1} style={styles.share_list} activeOpacity={1}>
              <Image
                source={require('../../assets/images/share/weibo.png')}
                style={styles.share_icon}
              />
              <Text style={styles.share_text}>微博</Text>
            </TouchableOpacity> */}
            <TouchableOpacity
              style={styles.share_list}
              activeOpacity={1}
              onPress={() => share(0)}>
              <Image
                source={require('../../assets/images/share/qq.png')}
                style={styles.share_icon}
              />
              <Text style={styles.share_text}>QQ</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.share_list}
              activeOpacity={1}
              onPress={() => share(1)}>
              <Image
                source={require('../../assets/images/share/kj.png')}
                style={styles.share_icon}
              />
              <Text style={styles.share_text}>QQ空间</Text>
            </TouchableOpacity>
          </View>
          <TouchableOpacity
            onPress={() => setShareVisible(false)}
            style={styles.cancel}>
            <Text style={styles.cancel_text}>取消</Text>
          </TouchableOpacity>
        </View>
      )}
      <LikeInput onSend={sendCommentFn} />
    </AreaView>
  );
};

export default NewsDetail;
